<template>
  <view class="containner">
    <view class="top" :style="{ 'border-radius': round + 'rpx' }">
      <view class="top-view"></view>
    </view>
    <view class="detail-box margin-box">
      <view class="left">
        <view class="left-item name">{{ overview.poiName }}</view>
        <view class="left-item label"
          ><text
            class="text"
            v-for="(tagItem, tagIndex) in overview.tags"
            :key="tagIndex"
            >{{ tagItem }}</text
          ></view
        >
        <view class="left-item like">{{ overview.likeCnt }}</view>
      </view>
      <img class="right" :src="overview.coverImageUrl" alt="" srcset="" />
    </view>
    <view class="pay-info margin-box">
      <view class="pay-info-item" v-if="overview.dishStyleList.length > 0">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/tag.png"
          mode="aspectFill"
        /><text
          v-for="(dishItem, dishIndex) in overview.dishStyleList"
          :key="'pay' + dishIndex"
          >{{ dishItem
          }}<text
            style="padding: 0 10rpx"
            v-if="dishIndex != overview.dishStyleList.length - 1"
            >|</text
          ></text
        >
      </view>
      <view class="pay-info-item" v-if="overview.avgPrice">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/price.png"
          mode="aspectFill"
        />{{ overview.avgPrice }}
      </view>
      <view class="pay-info-item" v-if="overview.paymentMethodList.length > 0">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/pay_way.png"
          mode="aspectFill"
        />
        <text
          v-for="(payItem, payIndex) in overview.paymentMethodList"
          :key="'pay' + payIndex"
        >
          {{ payItem }}
          <text
            style="padding: 0 10rpx"
            v-if="payIndex != overview.paymentMethodList.length - 1"
            >|</text
          >
        </text>
      </view>
    </view>
    <view class="open-time margin-box">
      <view
        class="open-time-item"
        v-if="overview.businessTime"
        @click="openTime"
        :data-spmCntSuffix="'.openTime@1.openTime@'"
          :data-custom="1"
          :data-spm="{}"
      >
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/open_time.png"
          mode="aspectFill"
        />{{ overview.businessTime }}
        <uni-icons type="right" size="14" color="#999999"></uni-icons>
      </view>
      <view class="open-time-item" v-if="overview.telephone" @click="callPhone"
          :data-spmCntSuffix="'.openTime@1.callPhone@'"
          :data-custom="1"
          :data-spm="{}">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/phone.png"
          mode="aspectFill"
        />{{ overview.telephone }}
      </view>
      <view class="open-time-item" v-if="overview.address" @click="viewMap"
          :data-spmCntSuffix="'.openTime@1.viewMap@'"
          :data-custom="1"
          :data-spm="{}">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
          mode="aspectFill"
        /><view style="flex: 1">{{ overview.address }}</view>
      </view>
      <block v-if="overview.trafficList && overview.trafficList.length > 0">
        <view class="open-time-item subway" v-for="(item, itemIdx) in overview.trafficList" :key="itemIdx">
          <view class="icon"></view>{{ item }}
        </view>
      </block>
    </view>
    <!-- 餐厅套餐 -->
    <view class="lp-box" v-if="recList.length > 0">
      <view class="lp-box-title"> 套餐 </view>
      <view class="meal-box" v-for="(item, index) in recList" :key="index">
        <view
          v-for="(serviceItem, serviceIndex) in item.packageContent"
          :key="serviceIndex"
        >
          <view class="meal-title-box">
            <view class="meal-title">{{ serviceItem.title }}</view>
          </view>
          <view
            style="
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
            "
          >
            <view class="serve-box" v-if="item.packageContent.length > 0">
              <view class="serve-content-list">
                <view
                  class="serve-content"
                  v-for="(textItem, textIndex) in serviceItem.text"
                  :key="textIndex"
                >
                  {{ textItem }}
                </view>
              </view>
            </view>
            <view class="bottom-box">
              <view class="bottom-box-right">
                <view class="price-box">
                  <view class="sell-box">
                    <text class="sell-1">{{ item.sealPrice.curreny }}</text>
                    <text class="sell-2">{{ item.sealPrice.price }}</text>
                    <text class="sell-3">{{ item.sealPrice.descr }}</text>
                  </view>
                  <view class="mark-box">
                    <view class="mark-1">
                      {{ item.markerPrice.curreny }}{{ item.markerPrice.price }}
                    </view>
                  </view>
                </view>
                <view class="book" @click="toOrder(item)"
                :data-spmCntSuffix="'.bottomBox@1.toOrder@'"
                :data-custom="1"
                :data-spm="item">抢购</view>
                <view v-if="false" class="book active">售罄 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom-flex">
          <view>
            <view v-if="item.useTypeValue" class="useTypeValue">
              使用种类: {{ item.useTypeValue }}
            </view>
            <view class="tag-box">
              <text class="tag-text active1">{{
                item.cancellationDTO.cancellationType
              }}</text>
              <text class="tag-line">|</text>
              <text class="tag-text active2">{{
                item.buyTimeBeforeDTO.value
              }}</text>
              <text class="tag-line">|</text>
              <text class="tag-text active3" @click="changeInstructions(item)"
                :data-spmCntSuffix="'.tagText@1.changeInstructions@'"
                :data-custom="1"
                :data-spm="item"
                >预订须知</text
              >
              <uni-icons type="forward" color="#0B4D8F" size="12"></uni-icons>
            </view>
          </view>
          <view class="sale-number">累计销量{{ item.saleVolumes }}</view>
        </view>
      </view>
    </view>
    <view
      class="recommended-dishes margin-box"
      v-if="overview.recDishList && overview.recDishList.length > 0"
    >
      <view class="title-box">
        <view class="line"></view>
        <text class="title">{{ overview.recommendedDishTitle }}</text>
      </view>
      <view class="content-box">
        <scroll-view scroll-x="true">
          <view class="dishes-list">
            <view
              class="dish-item"
              v-for="(recDishItem, recDishIndex) in overview.recDishList"
              :key="'recDishItem' + recDishIndex"
            >
              <img
                class="pic"
                mode="aspectFill"
                :src="recDishItem.coverImageUrl"
              />
              <text class="dsiName omit1">{{ recDishItem.dishName }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="hot margin-box" v-if="overview.comment">
      <view class="title-box">
        <view class="line"></view>
        <text class="title">{{ overview.commentTitle }}</text>
      </view>
      <view class="content">
        <rich-text :nodes="overview.comment"></rich-text>
      </view>
    </view>
    <uni-popup ref="businessHour" type="center">
      <businessHoursVue :time="overview.businessHours" @close="close" />
    </uni-popup>
  </view>
</template>

<script>
import appUtil from "../../utils/appUtil";
import businessHoursVue from "../businessHours/businessHours.vue";
export default {
  props: {
    overview: {
      type: Object,
    },
    round: {
      type: Number,
      default: 20,
    },
  },
  components: {
    businessHoursVue,
  },
  computed: {},
  data() {
    return {
      recList: [],
    };
  },
  onLoad() {},
  methods: {
    viewMap() {
      let latitude = this.overview.latitude;
      let longitude = this.overview.longitude;
      let title = this.overview.address;
      let data = {
        latitude: Number(latitude),
        longitude: Number(longitude),
        name: title,
        success: function () {},
      };
      this.$openLocation(data);
    },
    callPhone() {
      appUtil.makePhoneCall(this.overview.telephone);
    },
    async getRecList(item) {
      let res = await this.$aiRequest({
        url: `/product/restaurant/recList`,
        method: "POST",
        params: {
          poiId: item.poiId,
        },
      });
      if (res.success) {
        this.recList = res.data ? res.data : [];
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    toOrder(item) {
      let obj = {
        stdId: item.stdId,
        supplierProductId: item.supplierProductId,
      };
      const url = "/packageA/pages/sceneryOrder/sceneryOrder";
      this.$navTo(url, obj, "navigateTo");
    },
    openTime() {
      this.$refs.businessHour.open();
    },
    close() {
      this.$refs.businessHour.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.border-box {
  width: 100%;
  height: 20rpx;
  background: #f5f6f7;
}
.margin-box {
  margin: 0 28rpx;
}
.top {
  width: 100%;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 11;
  .top-view {
    width: 46rpx;
    height: 7rpx;
    background: #eaeaea;
    border-radius: 4rpx;
  }
}
.containner {
  padding-bottom: 40rpx;
  position: relative;
  background: linear-gradient( 180deg, #FFFFFF 0%, #F6F6F9 100%);
  // background: #F6F6F9;
  border-radius: 48rpx 48rpx 0rpx 0rpx;
  .detail-box {
    display: flex;
    padding: 30rpx 0;
    justify-content: space-between;

    .left {
      // .left-item {
      //   margin-bottom: 14rpx;
      // }

      .name {
        width: 400rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $sl-color-black;
        line-height: 36rpx;
        margin-bottom: 23rpx;
      }

      .label {
        height: 49rpx;
        line-height: 49rpx;
        border-radius: 5rpx;
        margin-bottom: 18rpx;
        .text {
          background: #fef6ec;
          padding: 8rpx 14rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 33rpx;
          margin: 0 10rpx 10rpx 0;
          border-radius: 4rpx;
          color: #795343;
        }
      }

      .like {
        height: 33rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $sl-color-dark-orage;
        line-height: 33rpx;
        margin-bottom: 5rpx;
      }
    }

    .right {
      width: 160rpx;
      height: 160rpx;
      background: #d8d8d8;
      border-radius: 10rpx;
    }
  }

  .pay-info {
    padding: 30rpx 0 16rpx 0;
    border-top: 1rpx solid #dddddd;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: $sl-color-grey;

    .pay-info-item {
      margin-bottom: 14rpx;
    }
  }

  .open-time {
    padding: 30rpx 0 30rpx 0;
    border-top: 1rpx solid #dddddd;
    border-bottom: 1rpx solid #dddddd;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 34rpx;
    color: $sl-color-grey;

    .subway {
      color: #767697;
    }

    .open-time-item {
      margin-bottom: 14rpx;
      display: flex;
    }
  }

  .icon {
    width: 25rpx;
    height: 25rpx;
    margin-right: 20rpx;
    margin-bottom: 4rpx;
  }

  .recommended-dishes {
    .title-box {
      padding-top: 30rpx;
      margin-bottom: 22rpx;
      justify-content: flex-start;

      .line {
        width: 5rpx;
        height: 28rpx;
        background: $sl-color-dark-grey;
        border-radius: 4rpx;
      }

      .title {
        padding-left: 20rpx;
        font-size: 32rpx;
        font-family: AppleColorEmoji;
        color: $sl-color-black;
        line-height: 46rpx;
      }
    }
    .content-box {
      padding: 22rpx;
      background: #ffffff;
      border-radius: 26rpx;
    }

    .dishes-list {
      display: flex;

      .dish-item {
        // flex: 1;
        width: 232rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;

        .pic {
          width: 232rpx;
          height: 174rpx;
          // background: #d8d8d8;
          border-radius: 10rpx;
        }
        .dsiName {
          // padding: 14rpx 0;
          font-size: 24rpx;
          line-height: 33rpx;
          margin: 14rpx 0 30rpx 0;
          color:#404064;
          font-weight: bold;
        }
        .name {
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: $sl-color-dark-grey;
        }
      }
    }
  }

  .hot {
    .title-box {
      padding-top: 30rpx;
      justify-content: flex-start;

      .line {
        width: 5rpx;
        height: 28rpx;
        background: $sl-color-dark-grey;
        border-radius: 4rpx;
      }

      .title {
        padding-left: 20rpx;
        font-size: 32rpx;
        font-family: AppleColorEmoji;
        color: $sl-color-black;
      }
    }

    .content {
      background: #ffffff;
      padding: 22rpx;
      border-radius: 26rpx;
      .pic {
        width: 670rpx;
        height: 546rpx;
        margin: 20rpx 0rpx;
        background: skyblue;
      }
    }
  }
}
.lp-box {
  width: 750rpx;
  background: #ffffff;
  box-shadow: 5rpx -1rpx 7rpx 0rpx rgba(156, 178, 211, 0.27);
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  margin-top: 30rpx;

  .lp-box-title {
    width: 702rpx;
    margin: 0 auto;
    font-size: 32rpx;
    color: $sl-color-grey;
    padding: 30rpx 0;
  }
}
.meal-box {
  width: 702rpx;
  min-height: 100rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(156, 178, 211, 0.27);
  border-radius: 30rpx;
  margin: 10rpx auto;

  .meal-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26rpx 30rpx;

    .meal-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $sl-color-grey;
      flex: 1;
    }
  }

  .serve-box {
    padding: 10rpx 30rpx;
    width: 60%;

    .serve-content-list {
      .serve-content {
        font-size: 26rpx;
        color: $sl-color-grey;
        padding-bottom: 6rpx;
      }

      .serve-content.active {
        display: flex;
      }
    }
  }
}
.bottom-flex {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx 50rpx 30rpx;
}
.sale-number {
  font-size: 21rpx;
  color: $sl-color-grey;
  width: 120rpx;
  text-align: right;
  padding-right: 20rpx;
}
.bottom-box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 70rpx;
  align-items: flex-end;

  .bottom-box-right {
    width: 207rpx;
    display: flex;
    justify-content: flex-end;
    margin-right: 30rpx;
    .price-box {
      text-align: right;

      .sell-box {
        padding: 0 11rpx;

        .sell-1 {
          font-size: 24rpx;
          color: $sl-color-red;
        }

        .sell-2 {
          color: $sl-color-red;
          font-size: 36rpx;
        }

        .sell-3 {
          color: #999999;
          font-size: 20rpx;
        }
      }

      .mark-box {
        padding: 0 11rpx;

        .mark-1 {
          font-size: 20rpx;
          color: #999999;
          text-decoration: line-through;
        }
      }
    }

    .book {
      width: 82rpx;
      height: 53rpx;
      background: #7696ff;
      text-align: center;
      line-height: 53rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      color: #ffffff;

      &.active {
        background: #bbbbbb;
        font-size: 26rpx;
      }
    }
  }
}
.tag-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  flex-wrap: wrap;

  .tag-text {
    font-size: 21rpx;
  }

  .tag-line {
    color: $sl-color-grey;
    padding: 0 8rpx;
  }

  .tag-text.active1 {
    color: #fe7d00;
  }

  .tag-text.active2 {
    color: $sl-color-grey;
  }

  .tag-text.active3 {
    color: #0b4d8f;
  }
}
.useTypeValue {
  font-size: 24rpx;
  color: $sl-color-grey;
  padding: 0 30rpx 10rpx 0;
}
</style>
